<template>
	<view :style="[navBoxStyle]">
		<view class="wlkflex no-warp">
            <view  v-if="item.params.imgMode=='fixed'"  v-for="(nav,index) in item.data.image" :key="index" @click="jump(nav.linkpath)">
                <view :style="[navInfoStyle]">
                    <image  :style="[navImgStyle]" v-if="item.params.mode=='img'" class="nav-img block"  mode="aspectFill" :src="nav.url"></image>
                    <view class="center nav-title" :style="'color:'+item.style.color">{{nav.title}}</view>
                </view>
            </view>
            <view  v-else class="wd100">
                <u-scroll-list :indicator="false">
                        <view v-for="(nav,k) in item.data.image" :style="[navInfoStyle]" :key="k" @click="jump(nav.linkpath)">
                            <image v-if="item.params.mode=='img'"  class="block" :style="[navImgStyle]"  mode="aspectFill" :src="nav.url"></image>
                            <view class="center nav-title" :style="[navTitleStyle]">{{nav.title}}</view>
                        </view>
                </u-scroll-list>
            </view>
        </view>
	</view>
</template>

<script>
    import { toUrl } from '@/wlkutils/tools';
	export default {
		name:"wlk-nav",
		data() {
			return {
                navBoxStyle:{},
                navImgStyle:{width:'',height:''},
                navTitleStyle:{width:'',height:''},
                navInfoStyle:{width:''},
			};
		},
        //属性
        props: {
            item: {
                type: Object,
                default: ()=> {
                    return []
                }
            },
            systemInfo: {
                type: Object,
                default: ()=> {
                    return {}
                }
            }
        },
        created:function(e){
            this.setNavStyle();
        },
        methods: {
            setNavStyle(){
                var _self = this;
                var systemWidth = _self.systemInfo.windowWidth;
                var length = _self.item.data.image.length;
                this.navBoxStyle.backgroundColor = this.item.style.bgColor;
                if(this.item.params.imgMode=='scroll'){
                    _self.navImgStyle.width = uni.$u.addUnit(systemWidth / (_self.item.params.imgTotal-0.8),'px');
                    _self.navInfoStyle.width = _self.navImgStyle.width;
                    _self.navTitleStyle.width = _self.navImgStyle.width;
                    systemWidth = systemWidth * 0.82;
                    length = _self.item.params.imgTotal;
                }else{
                    _self.navImgStyle.width = uni.$u.addUnit(systemWidth / length,'px');
                    _self.navInfoStyle.width = _self.navImgStyle.width;
                    _self.navTitleStyle.width = _self.navImgStyle.width;
                }
                _self.navImgStyle.color = this.item.style.color;
                //确定图片高度
                if(this.item.params.mode=='img'){
                    _self.navImgStyle.height = _self.item.height;
                }
            },
            jump(path){
                toUrl(path);
            }
        }
	}
</script>

<style lang="scss" scoped>
    .nav-img{
        height: 100%;
        width: 100%;
    }
    .nav-title{
        font-size:$font-base;
        padding: 10rpx 0;
        display: -webkit-box !important;
        overflow: hidden;
        text-overflow: clip;
        word-break: break-all;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical !important;
        white-space: nowrap;
    }
</style>